<template>
    <!-- <div id="app" v-if="recordsList"> -->
    <div id="app" >
      <div id="content">
      <div v-for="item in recordsLi" :key="item.recordsId" class="item">
        <div id="firstLine">
        <div id="f_left">
          <span>{{ item.recordsTime}}</span>
        </div>
      </div>
      <div id="secondLine">
        <div id="f_left">
          <span>{{item.recordType}}-{{item.hospital}}-利达</span>
        </div>
      </div>
      <div >
        <span id="f_left">发病日期:&nbsp;{{ item.recordsTime}}</span>
      </div>
      <div >
        <span id="f_left">主诉:&nbsp;{{ item.mainSuit }}</span>
      </div>
      <div >
        <span id="f_left">诊断信息:&nbsp;{{ item.message }}</span>
      </div>
      <div >
        <span id="f_left">医生建议:&nbsp;{{item.docterSuggest}}</span>
      </div>
    </div>
    </div>
  </div>
  </template>
  <script setup lang="ts">
  import { ref, reactive, computed } from "vue";
import { useStore, mapGetters } from "vuex";
  const store = useStore();  
  const recordsList = computed(mapGetters(["getRecordsList"]).getRecordsList.bind({$store: store,}))
  const recordsLi = computed(()=>{
     
     return recordsList.value
  })

  </script>
  <style scoped>
  #app {
    display: flex;
    justify-content: center;
    flex-direction: column;
    

  }
  #content{
    height: 250px;
overflow-x: hidden;
overflow-y: scroll
  }
  #app span {
    display: flex;
    height: 30px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    /*  ; */
  }
  #f_left {
    margin-left: 10px;
  }
  #f_right{
      margin-right: 10px;
  }
  #f_left > span{
      font-weight: 600;
  }
  #f_right > span{
      font-weight: 600;
  }
  .item{
    margin: 10px;
  }
  </style>